<template>
  <div class='header'>
    <el-row>
      <el-col :span=12 align="left">Neuron Browser for Facility of Mapping Brain-wide Mesoscale Connectome
      </el-col>
      <el-col :span=12 align="right">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#524540" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
          <el-menu-item index="1"><a href="http://bap.cebsit.ac.cn" target="_blank">HOME</a></el-menu-item>
          <el-submenu index="2">
            <template slot="title">BROWSER</template>
            <el-menu-item index="2-1"><a href="./" target="_blank">MOUSE</a></el-menu-item>
          </el-submenu>
          <el-menu-item index="3">ABOUT</el-menu-item>
          <el-menu-item index="4"><a href="http://www.ion.ac.cn/" target="_blank">ION</a></el-menu-item>
          <el-menu-item index="5"><a href="https://mail.cstnet.cn/" target="_blank">E-mail</a></el-menu-item>
          <!-- <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">CONTACT</a></el-menu-item> -->
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}

</script>
<style>
.el-menu {
  float: left;
  height: 60px;
}
  .el-menu-demo:not(.el-menu--collapse) {
    /*width: 200px;*/
    height: 60px;

  }
div.header {
  min-width: 1100px;
  height: 61px;
  line-height: 60px;
  background: #524540;
  color: #fff;

}

</style>
